Skip to content

fix(types): Accept attribute paths in plotly_relayout, relayout, restyle, and update - #8126

Open
camdecoster wants to merge 3 commits into
mainfrom
cam/8047/relayout-update-types
Open

camdecoster wants to merge 3 commits into
mainfrom
cam/8047/relayout-update-types

Conversation

@camdecoster

@camdecoster camdecoster commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Description

Update types to accept attribute paths in plotly_relayout, relayout, restyle, and update.

Closes #8047.

Changes

  • Update types
  • Add type tests
  • Add test step in CI

Testing

  • Be on main
  • Save the following in the root project folder as test.ts:
import * as Plotly from './lib/index';

declare const gd: HTMLElement;

Plotly.relayout(gd, { 'xaxis.autorange': true });
Plotly.relayout(gd, 'xaxis.range[0]', 5);
Plotly.restyle(gd, { 'marker.color': 'red' });

// @ts-expect-error a typo must still fail
Plotly.relayout(gd, { titl: 'abc' });
  • Run the following command:
    npx tsc --noEmit --ignoreConfig --strict --module preserve --moduleResolution bundler --skipLibCheck test.ts
    
  • Note that there are errors (though these are valid calls)
  • Switch to this branch
  • Run the command again
  • Note that there are no errors
  • Check the CI results for test-types

Notes

  • The escape hatch of an attribute path string being any is a compromise so that we don't have to generate a list of any possible path string
  • The already accepted keys will still work

@camdecoster
camdecoster marked this pull request as ready for review October 15, 2026 23:39
Comment thread .github/workflows/ci.yml
- name: Type-check TypeScript sources
run: npm run typecheck

test-types:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: could we just add test-types as a second step in the typecheck job above? Is there a reason you want a second runner?

Comment thread test/types/update_api.ts
/**
* Consumer-side checks for the `relayout`, `restyle` and `update` types.
*
* Nothing here runs. `npm run typecheck` compiles this file against the public entry point.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit:

Suggested change
* Nothing here runs. `npm run typecheck` compiles this file against the public entry point.
* Nothing here runs. `npm run test-types` compiles this file against the public entry point.

* autorange keys that flatten nested updates.
*/
export interface PlotRelayoutEvent extends Partial<Layout> {
export interface PlotRelayoutEvent extends LayoutUpdate {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This type contains 6 hand-crafted keys (xaxis.range[0], etc.) but LayoutUpdate doesn't type these keys at all.
This starts to look like 2 sources of truth for these types. And already, the two definitions are drifting:
the hand-crafted keys here define values that are narrower than in LayoutUpdate. xaxis.range[0]?: number misses date axes with values like 2026-10-16.

What do you think about moving the hand-typed keys here into LayoutUpdate with the type widened to include date strings? That way there would be a single definition.

Comment thread src/types/core/api.d.ts

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overloads you add here are good, but can still report "errors" on perfectly valid code.

Example:

import * as Plotly from 'plotly.js';
type RelayoutArg = Parameters<typeof Plotly.relayout>[1];
const wrapped: RelayoutArg = { autosize: true };

There is a red squiggle as typescript evaluates against the "last" overload and completely misses the other valid overload.
Typescript says to put the most generic signature last. What do you think about including a generic "catch-all" overload at the end for these kinds of cases?

export function relayout(root: Root, astr: string | LayoutUpdate, val?: any): Promise<PlotlyHTMLElement>;

The same comment applies to the restyle overloads.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: Typing issue in relayout()

2 participants